// 退出登录
let exit =document.querySelector('.exit')
let login = document.querySelector('#login_a')
if(localStorage.getItem('username') ){
    login.innerHTML ="您已登录"
    exit.style.display='inline-block'
}
console.log(exit);
exit.onclick = function(){
    console.log(1);
    localStorage.removeItem('username')
  localStorage.removeItem('pass')
  login.innerHTML="登录" 
  exit.style.displa ="none"
}
login.onclick =function(){
    if (!localStorage.getItem('username')) {
        location.href="http://localhost:2205/html/login.html"
    }
}
class Index{
    constructor (){
        this.conta = document.querySelector('.container-a')
      
  this.init()
    }
    init(){
     this.requesta()
    }
    // 利用ajax向后台发送数据渲染页面
    requesta() {
        pAjax({url: '../libs/goods.json'})
        .then(data=>{
            let res = JSON.parse(data).slice(1 , 11)
            this.rendera(res)
        })
    }
    rendera(data) {
          this.conta.innerHTML = template('tpl', {list: data})
    }
}
new Index()
class Cart {
    constructor() {
        this.tbody = document.querySelector('tbody')
        this.cartTable = document.querySelector('.cartTable')
        this.selectAll = document.querySelector('.selectAll')
        this.totalNum = document.querySelector('.totalNum')
        this.money = document.querySelector('.money')
        this.list = JSON.parse(localStorage.getItem('cart')) || []
        this.init()
    }
    init() {
        // 渲染数据
        this.render()
         this.addEle()
         this. total()
    }
    //拿到首页加入购物车的数据,动态渲染页面
    render() {
        // 判断list是否有数据,不是提供返回换回首页 
        if (!this.list.length) {
            // 创建一个新的tr>td标签   
            this.tbody.innerHTML =
                `
               <tr height='300'>
               <td colspan = "6" style="font-size:30px;color:black">购物车空空如也,快来选购吧!!!<a href="http://localhost:2205/index.html" style="font-size:40px;color:red">GO</a></td>
               </tr>
               `
        } else {
            // 会调用多次渲染,必须保证每次都是赶操作的状态
            this.tbody.innerHTML = "";
            this.list.forEach(item => {
                this.tbody.innerHTML += `
                <tr>
                        <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                        <td>
                        <a href="http://localhost:2205/html/details.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                            <img src="${item.img_small_logo}"class="xqy" ></a>
                            <span class="hide">${item.title}</span>
                        </td>
                        <td><span>${item.price}</span></td>
                        <td>
                            <span class="sub" data-id="${item.goods_id}">-</span>
                            <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                            <span class="add" data-id="${item.goods_id}">+</span>
                        </td>
                        <td><span class="price">${item.price * item.cart_number}元</span></td>
                        <td><span class="del" data-id="${item.goods_id}">删除</span></td>  
                </tr>
                
                `
            })
        }
        this.total()
        localStorage.setItem('cart',JSON.stringify(this.list))
    }

    addEle() {
        this.cartTable.addEventListener('click', e => {
            let target = e.target || e.srcElement
            // 全选
            if (target.className == 'selectAll') {
                let type = target.checked
                this.list.forEach(item => {
                    item.is_select = type
                })
                this.render()
            }

            // 单选
            if (target.className == 'select') {
                // 通过设置item.is_select && "checked",一开始checkd的值就是false.通过点击找到
                // 当前的id,把checked的值值取反,就得到了单选的状态.全选和单选不一样,单选有多个
                // 之后通过循环把选中的状态更改,未选择的进行初始化
                let id = target.dataset.id - 0
                let goods = this.list.find(item => { return item.goods_id == id })
                goods.is_select = !goods.is_select
                this.render()
            }
            // 商品增加add
            if (target.className == "add") {
                // 有多个add,要得到哪一个需要进行id对比
                let id = target.dataset.id - 0
                let goods = this.list.find(item => { return item.goods_id == id })
                if(goods.cart_number == 2){
                    alert('亲,限购10件哦!!!')
                    return false
                }
                goods.cart_number++
                this.render()
            }
            // 商品减少sub
            if (target.className == 'sub') {
                let id = target.dataset.id - 0
                let goods = this.list.find(item => { return item.goods_id == id })
                let index = this.list.findIndex(item => { return item.goods_id == id })
                goods.cart_number--
                // 商品只有一个的时候再次减少就删除商品
                if (goods.cart_number < 1) {
                    this.list.splice(index, 1)
                }
                this.render()
            }
            // 删除功能
            if (target.className == 'del') {
                let id = target.dataset.id - 0
                let index = this.list.findIndex(item => { return item.goods_id == id })
                this.list.splice(index, 1)
                this.render()
                if(!this.list.length){
                this.selectAll.checked = false
               }  
            }
            
            // 选中删除
            if(target.className == 'dlAll'){
                let res = this.list.filter(item=>{return item.is_select == false})
                this.list =res
                this.render()
                if(!this.list.length){
                    this.selectAll.checked = false
                }
            }
            // 订单页面跳转
            if(target.className == "calc"){
                if( this.selectAll.checked == true){
                    location.href="http://localhost:2205/html/pay.html"
                }else{
                    alert('请勾选商品')
                    return false
                }
            }
        }, false)
    }
    total (){
        let num = 0
        let price = 0
        this.list.forEach(item=>{
            if(item.is_select == true){
                num+=item.cart_number
                price+=item.price * item.cart_number
            }
            let res = this.list.every(item=>{return item.is_select == true })
            if(res){
                this.selectAll.checked =true
            }else{
                this.selectAll.checked =false
            }
        })
        this.totalNum.innerHTML = num
        this.money.innerHTML = price
    }


}
new Cart()
